<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单信息展示</title>
    <style>
        /* CSS 样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        .container {
            width: 80%;
            margin: 0 auto;
            padding: 20px;
        }

        h1 {
            text-align: center;
        }

        .input-group {
            margin-bottom: 20px;
            /* Increased margin-bottom */
            display: flex;
            align-items: center;
            /* Align items vertically */
        }

        .input-group label {
            margin-right: 10px;
            flex-shrink: 0;
            /* Prevent label from shrinking */
        }

        .input-group input[type="text"],
        .input-group button,
        .input-group select {
            padding: 8px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .input-group button {
            background-color: #007bff;
            color: #fff;
            border: none;
            cursor: pointer;
        }

        .input-group button:hover {
            background-color: #0056b3;
        }

        .hidden {
            display: none;
        }

        #orderInfoTable {
            width: 100%;
            margin: 20px auto;
            border-collapse: collapse;
        }

        #orderInfoTable th,
        #orderInfoTable td {
            border: 1px solid #ccc;
            padding: 8px;
            text-align: center;
        }

        #orderInfoTable th {
            background-color: #f2f2f2;
        }

        #errorMsg {
            margin-top: 10px;
            text-align: left;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- <h1>订单信息展示</h1> -->
        <div class="input-group">
            <input type="text" id="orderNumber" placeholder="订单号" style="width: 300px;"> <!-- Increased width -->
            <button onclick="validateAndFetchOrderInfo()">获取订单信息</button>
        </div>
        <div class="input-group">
            <label for="yearMonth">选择年月:</label>
            <select id="year" style="width: 120px;"> <!-- Adjusted width -->
                <option value="">请选择年份</option>
                <!-- JavaScript 生成年份选项 -->
            </select>
            <select id="month" style="width: 120px;"> <!-- Adjusted width -->
                <option value="">请选择月份</option>
                <option value="01">1月</option>
                <option value="02">2月</option>
                <option value="03">3月</option>
                <option value="04">4月</option>
                <option value="05">5月</option>
                <option value="06">6月</option>
                <option value="07">7月</option>
                <option value="08">8月</option>
                <option value="09">9月</option>
                <option value="10">10月</option>
                <option value="11">11月</option>
                <option value="12">12月</option>
            </select>
        </div>
        <div id="errorMsg" class="hidden"></div>

        <table id="orderInfoTable" class="hidden"></table>
    </div>

    <script>
        // 上次获取的订单号
        var lastOrderNumber = "";

        // 生成年份选项
        var yearSelect = document.getElementById("year");
        var currentYear = new Date().getFullYear();
        for (var i = currentYear; i >= currentYear - 50; i--) {
            var option = document.createElement("option");
            option.text = i;
            option.value = i;
            yearSelect.add(option);
        }

        // 默认选择当年当月
        var currentMonth = new Date().getMonth() + 1; // JavaScript中月份是从0开始计数的，所以要加1
        document.getElementById("year").value = currentYear.toString();
        document.getElementById("month").value = currentMonth < 10 ? "0" + currentMonth : currentMonth.toString();

        // 获取订单信息
        function fetchOrderInfo(orderNumber) {
            // 创建 FormData 对象

            var orderNumber = document.getElementById("orderNumber").value;
            var year = document.getElementById("year").value;
            var month = document.getElementById("month").value;

            if (!orderNumber.trim()) {
                showError("订单号不能为空");
                return;
            }
            if (!year || !month) {
                var currentYear = new Date().getFullYear();
                var currentMonth = new Date().getMonth() + 1; // JavaScript中月份是从0开始计数的，所以要加1
                year = currentYear.toString();
                month = currentMonth < 10 ? "0" + currentMonth : currentMonth.toString();
            }
            var yearMonth = year + month;
            console.log(yearMonth); // 将 yearMonth 发送给服务器

            // 创建 FormData 对象
            var formData = new FormData();
            formData.append("chargeNo", orderNumber.toString());
            formData.append("month", yearMonth);
            // 创建 XMLHttpRequest 对象
            var xhr = new XMLHttpRequest();
            xhr.open("POST", "https://dytest.zhaoshujie.top/console/findOrder", true);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === XMLHttpRequest.DONE) {
                    if (xhr.status === 200) {
                        var response = JSON.parse(xhr.responseText);
                        if (response.Code == "0000") {
                            if (response.Data != null) {
                                displayOrderInfo(response.Data)
                            }
                        } else if (response.Code == "4001") {
                            var errorMsg = response.Msg
                            displayErrorMessage(errorMsg);
                        } else {
                            displayErrorMessage("查询失败");
                        }
                    } else {
                        displayErrorMessage("网络错误：" + xhr.status);
                    }
                }
            };
            xhr.send(formData);
        }

        // 显示错误信息
        function displayErrorMessage(message) {
            var errorMsg = document.getElementById("errorMsg");
            errorMsg.textContent = message;
            errorMsg.classList.remove("hidden");
        }

        // 获取字段标签
        function getLabel(fieldName) {
            var labels = {
                "appId": "字节商户编码",
                "chargeNo": "字节充值订单号",
                "mobile": "手机号",
                "carrierCode": "运营商编码",
                "adCode": "省份编码",
                "timestamp": "时间戳",
                "notifyUrl": "回调地址",
                "productDenomination": "面值",
                "bizType": "业务类型",
                "subBizType": "子业务类型",
                "supplierCode": "供应商编码",
                "channelChargeNo": "自己的订单号",
                "supplierOrderNo": "供应商订单号",
                "orderStatus": "订单状态",
                "contractPrice": "结算金额",
                "supplierContractPrice": "供应商结算金额",
                "finishTime": "完成时间",
                "successTime": "成功时间",
                "originCarrierCode": "原运营商编码",
                "currentCarrierCode": "现运营商编码",
                "txnDate": "交易日期",
                "finishDate": "终态日期",
                "returnCode": "返回码",
                "returnMessage": "返回信息",
                "createTime": "创建时间",
                "notifyStatus": "通知状态",
                "notifyTimes": "通知次数",
                "lastNotifyTime": "最近一次通知时间",
                "updateTime": "更新时间"
            };
            return labels[fieldName] || fieldName;
        }

        // 显示订单信息
        function displayOrderInfo(order) {
            var orderInfoTable = document.getElementById("orderInfoTable");
            orderInfoTable.innerHTML = "";

            var rowIndex = 0;
            var currentRow;

            for (var key in order) {
                if (rowIndex % 2 === 0) {
                    currentRow = orderInfoTable.insertRow();
                }
                var cell1 = currentRow.insertCell();
                var cell2 = currentRow.insertCell();

                cell1.textContent = getLabel(key);
                cell2.textContent = order[key];
                cell1.style.backgroundColor = "#dcdcdc";

                rowIndex++;
            }

            orderInfoTable.classList.remove("hidden");
        }

        // 校验订单号并获取订单信息
        function validateAndFetchOrderInfo() {
            var orderNumber = document.getElementById("orderNumber").value.trim();
            if (orderNumber === "") {
                displayErrorMessage("订单号不能为空");
                return;
            }
            // if (orderNumber === lastOrderNumber) {
            //     displayErrorMessage("请不要重复获取相同订单号的信息");
            //     return;
            // }
            // 清除错误信息
            var errorMsg = document.getElementById("errorMsg");
            errorMsg.textContent = "";
            errorMsg.classList.add("hidden");
            // 获取订单信息
            fetchOrderInfo(orderNumber);
            // 更新上次获取的订单号
            lastOrderNumber = orderNumber;
        }
    </script>
</body>

</html>